<template>
  <Modal v-model="opend" :close-on-mask="false" :has-divider="true">
    <template #header>{{ title || template.substring(0,template.indexOf("."))}}&nbsp;&nbsp;<span class="link" v-if="template != null" style="font-size:14px;" @click="tempDown">模板下载</span></template>
    <div v-width="400">
      <div class="h-uploader-browse-button h-uploader-drop-element" style="position: relative; z-index: 1;" @click="fileChange">
        <div>
          <p class="text-center">
            <i class="h-icon-upload blue-color" style="font-size: 30px;"></i>
          </p>
          <p class="text-center">点击这里上传</p>
        </div>
      </div>
      <input v-show="false" :disabled="isLoading" ref="inputFile" type="file" :accept="accept" @change="add($event)" :multiple="multiple" />
      <ol>
        <li :key="i" v-for="(item,i) in file" style="border: solid 2px red;border-bottom-width: 2px">
          <span class="link">{{ item.name }}</span>
        </li>
      </ol>
      <div>
      </div>
    </div>
    <template #footer>
      <span style="font-size:13px;color:red;float:left;">{{ message }}</span>
      <h-button color="primary" icon="h-icon-error" @click="opend = false">关闭</h-button>
      <h-button color="blue" icon="h-icon-upload" :loading="isLoading" @click="confirm">上传</h-button>
    </template>
  </Modal>
</template>
<script>
import { message } from 'heyui';

export default {
  name: "PaasUploadModal",
  props: {
    url: "",
    title: "",
    accept: "",
    multiple: {
      default: false,
    },
    name: {
      default: "file",
    },
    template: "",
    params: {
      default: null,
    },
    success: {
      default: "success",
    },
  },
  data() {
    return {
      opend: false,
      isLoading: false,
      file: [],
      message: "",
    };
  },
  methods: {
    fileChange() {
      this.message = "";
      this.$refs.inputFile.click();
    },
    add(event) {
      this.message = "";
      this.file = event.target.files;
    },
    confirm(event) {
      event.preventDefault();
      if (this.file.length == 0) {
        this.message = "未上传任何文件";
        return false;
      }
      this.isLoading = true;
      let formData = new FormData();
      for (var i = 0; i < this.file.length; i++) {
        formData.append(this.name, this.file[i]);
      }
      if (!!this.params) {
        for (var key in this.params) {
          formData.append(key, this.params[key] || "");
        }
      }
      this.$upload(this.url, formData)
        .then((res) => {
          this.isLoading = false;
          if (res.data.code == this.$success) {
            message.info("上传成功");
            this.file = [];
            this.$bus.emit(this.success, res.data.msg);
          } else {
            message.error(res.data.msg);
          }
          this.message = res.data.msg;
        })
        .catch((err) => {
          this.isLoading = false;
          this.message = err;
        });
    },
    show() {
      this.file = [];
      this.message = "";
      this.opend = true;
    },
    tempDown() {
      location.href = "/static/excel/" + this.template;
    },
  },
};
</script>